<template>
  <div class="page-container">
    <div class="work-left">
      <Collect ref="collect" />
      <Wait ref="wait" />
    </div>
    <div class="work-right">
      <Order ref="order" />
      <Notice />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Collect from "./components/collect.vue";
import Wait from "./components/wait.vue";
import Order from "./components/order.vue";
import Notice from "./components/notice.vue";

export default {
  name: "WorkTableBox",
  components: {
    Collect,
    Wait,
    Order,
    Notice,
  },
  computed: {
    ...mapGetters(["changeState"]),
  },
  watch: {
    changeState(newValue) {
      if (newValue) {
        this.initHandle();
      }
    },
  },
  methods: {
    initHandle() {
      this.$refs?.order.getListHandle();
      this.$store.dispatch("GetMenuInCollectList");
      this.$store.dispatch("GetMenuInClickList");
    },
  },
  mounted() {
    this.initHandle();
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  flex-direction: row;
  justify-content: space-between;
}
.work-left,
.work-right {
  display: flex;
  flex-direction: column;
}

.work-left {
  width: 70.5%;
}
.work-right {
  width: calc(29.5% - 16px);
}
@media only screen and (min-width: 1500px) {
  .work-left {
    width: calc(100% - 416px);
  }
  .work-right {
    width: 400px;
  }
  /* Styles */
}
</style>
